<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{list.length}} </strong></span>
    <ul @click="change" class="filters">
      <li>
        <!-- 需要绑定事件 声明变量 在data -->
        <!-- 在三个a 里面绑定动态 (一定加冒号) :class 在selected ：把变量的动态放进去 -->
        <!-- 在ul 里面绑定事件 因为可以冒泡 可以依次访问3个li？ -->
        <!-- 将要传参的属性传到父组件，isSel -->

         
        <a 
         @click="isSel ='all' "
        :class="{selected :isSel ==='all'}" href="javascript:;" >全部</a>
      </li>
      <li>
        <a 
      @click="isSel ='no'"
      :class="{selected :isSel ==='no'}"
        href="javascript:;">未完成</a>
      </li>
      <li>
        <a 
         @click="isSel ='yes'"
      :class="{selected :isSel ==='yes'}"
        href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button @click="qingChu" class="clear-completed" >清除已完成</button>
  </footer>
</template>

<script>
export default {
        props:['list'],
        //在父组建 先使用才能传过来
        data(){
          return{
            isSel:'all'
          }
        },
        methods:{
          change(){
            console.log(this.isSel);
            this.$emit('changes',this.isSel)
           // 将要传参的属性传到父组件，isSel 
           //并且定义属性如果issel 是all 显示全部 yse就是 true
          },
          qingChu(){
            this.$emit('ganjing')
          }
        }
}
</script>